<template>
    <div>
        
        <div class="content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" >

                <el-form-item label="用户名" class="form-header">
                    <el-select
                      v-model="form.userId"
                      placeholder="请选择"
                      class="slect"
                      @change="getChange"
                    >
                      <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                <el-form-item label="状态" class="form-header">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="计划名称" class="form-header">
                    <el-input v-model="form.scheduleName" placeholder="计划名称"></el-input>
                </el-form-item>
                <el-form-item label="推广业务" class="form-header">
                    <el-input v-model="form.promotionBusiness" placeholder="推广业务"></el-input>
                </el-form-item>
                <el-form-item label="预算" class="form-header">
                    <el-input v-model="form.budget" placeholder="预算"></el-input>
                </el-form-item>
                <el-form-item label="地域" class="form-header">
                    <el-input v-model="form.region" placeholder="地域"></el-input>
                </el-form-item>
                <el-form-item label="时段" class="form-header">
                    <el-input v-model="form.periodTime" placeholder="时段"></el-input>
                </el-form-item>
                <el-form-item label="计划类型" class="form-header">
                    <el-select v-model="form.promotionType" placeholder="请选择">
                        <el-option
                          v-for="item in options2"
                          :key="item.vlaue"
                          :label="item.label"
                          :value="item.vlaue">
                        </el-option>
                      </el-select>
                  </el-form-item>
                
              </el-form>
              
        </div>
        <div class="queding">
          <div><el-button type="primary" v-if="!productId" @click="btnQue">确定</el-button></div>
          <div><el-button type="primary" v-if="productId" @click="btnQue2">确定</el-button></div>
          <div><el-button type="primary" plain @click="btnQuxiao">取消</el-button></div>
        </div>
    </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import {add,edit} from '@/api/sstg/jihua'
export default{
    name:'zhanghugai',
    data(){
        return{
            userList:[],
            productId:"",
            value:"",
            options2:[
                {
                    vlaue:'推广业务',
                    label:'推广业务'
                },
                {
                    vlaue:'营销目标',
                    label:'营销目标'
                },
              
            ],
            options3:[
                {
                    vlaue:'推广业务',
                    label:'推广业务'
                },
                {
                    vlaue:'营销目标',
                    label:'营销目标'
                },
            ],
          
            form:{
                userId:"",
                userName:"",
                status:"",
                scheduleName:"",
                promotionBusiness:"",
                budget:"",
                region:"",
                periodTime:"",
                promotionType:"",
            },
            options:[
                {
                    vlaue:'有效',
                    label:'有效'
                },
                {
                    vlaue:'处在暂停时段',
                    label:'处在暂停时段'
                },
                {
                    vlaue:'暂停推广',
                    label:'暂停推广'
                },
                {
                    vlaue:'账户预算不足',
                    label:'账户预算不足'
                },
                {
                    vlaue:'推广计划预算不足',
                    label:'推广计划预算不足'
                },
                
            ],
            formInline:{}
        }
    },
    props:{
        objDate2: {
        type: Object,
        default: () => {},
      },
    },
    mounted() {
        this.getList()
        if(this.objDate2){
            this.form=this.objDate2
            this.productId=this.objDate2.userId
        }
    },
    methods: {
        //选择
        getChange(e){
           
            for(let item of  this.userList){
                if(e == item.userId){
                    this.form.userName=item.userName
                }
            }
            console.log('选择', this.form.userName)
        },
         /** 查询用户列表 */
    getList() {
      listAllUser({}).then((res) => {
        res.data.forEach((item) => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId,
          });
        });
      });
    },
        //修改
        btnQue2(){
            edit(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
        //确定
        btnQue(){
            add(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
      btnQuxiao(){
        this.$emit('quxiao')
      }
    },
}
</script>
<style scoped>
.queding{
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;

}
.form-header{
    width: 430px;
    border: none;
}
.slect{
    width: 204px;
}
.content{
   width: 90%;
   margin: 0 auto;
   margin-top: 30px;
}
</style>